import { computed, unref } from "vue";
const namespace = "e";
const statePrefix = "is-";
// 返回一个bem命名规范的类名
const _bem = (
  block: string,
  blockSuffix: string,
  element: string,
  modifier: string
) => {
  let cls = `${namespace}-${block}`;
  if (blockSuffix) {
    cls += `-${blockSuffix}`;
  }
  if (element) {
    cls += `__${element}`;
  }
  if (modifier) {
    cls += `--${modifier}`;
  }
  return cls;
};
export const useNamespace = (block: string) => {
  const b = (blockSuffix = "") => _bem(block, blockSuffix, "", "");
  const e = (element?: string) => (element ? _bem(block, "", element, "") : "");
  const m = (modifier?: string) =>
    modifier ? _bem(block, "", "", modifier) : "";
  const bm = (blockSuffix?: string, modifier?: string) =>
    blockSuffix && modifier ? _bem(block, blockSuffix, "", modifier) : "";
  /**
   * 由于微信小程序，H5，nvue之间绑定class的差异，无法通过:class="[bem()]"的形式进行同用
   * 故采用如下折中做法，最后返回的是数组，类似['a', 'b', 'c']的形式
   * @param {Object} prop 组件名称
   * @param {Array} fixed 一直会存在的类名
   * @param {Array} change 会根据变量值为true或者false而出现或者隐藏的类名
   * @return Array
   */
  const bem_m = (
    prop: Record<string, any>,
    fixed: Array<string>,
    change: Array<string>
  ) => {
    const classes: Set<string> = new Set([]);
    if (fixed) {
      fixed.forEach((item) => {
        classes.add(_bem(block, "", "", prop[item]));
      });
    }
    if (change) {
      change.forEach((item) => {
        // 这里的类名，会根据this[item]的值为true或者false，而进行添加或者移除某一个类
        prop[item]
          ? classes.add(_bem(block, "", "", item))
          : classes.delete(_bem(block, "", "", item));
      });
    }
    return [...classes];
  };
  const is: {
    (name: string, state: boolean | undefined): string;
    (name: string): string;
  } = (name: string, ...args: [boolean | undefined] | []) => {
    const state = args.length >= 1 ? args[0]! : true;
    return name && state ? `${statePrefix}${name}` : "";
  };

  return {
    b,
    e,
    m,
    bm,
    bem_m,
    is,
  };
};
